<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客系统 - 首页</title>
    
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/components.css">
    <style>
        .hero-section {
            background: linear-gradient(135deg, rgba(0,123,255,0.1), rgba(40,167,69,0.1));
            padding: 60px 0;
            text-align: center;
            margin-bottom: 40px;
            border-radius: 16px;
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            animation: shimmer 3s infinite;
            opacity: 0.5;
        }
        
        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #007bff, #28a745);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero-subtitle {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .cta-btn {
            padding: 15px 30px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }
        
        .cta-btn-primary {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
        }
        
        .cta-btn-secondary {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
        }
        
        .cta-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }
        
        .feature-card {
            background: rgba(255,255,255,0.95);
            padding: 30px;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }
        
        .feature-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            display: block;
        }
        
        .feature-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        
        .feature-desc {
            color: #666;
            line-height: 1.6;
        }
        
        .quick-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }
        
        .stat-card {
            background: rgba(255,255,255,0.9);
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #007bff;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .hero-subtitle {
                font-size: 1rem;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .cta-btn {
                width: 200px;
            }
        }
    </style>
</head>

<body>
<div class="nav">
    <div class="logo-container">
        <div class="logo-icon">B</div>
        <span class="blog-title">我的博客系统</span>
    </div>
    <div class="space"></div>
    <a class="nav-span" href="index.html">首页</a>
    <a class="nav-span" href="blog_list.html">博客</a>
    <a class="nav-span" href="blog_edit.html">写作</a>
    <a class="nav-span" href="blog_login.html" id="authLink">登录</a>
</div>

<div class="container">
    <div class="right" style="width: 100%;">
        <!-- 主标题区域 -->
        <section class="hero-section fade-in-up">
            <h1 class="hero-title">欢迎来到我的博客世界</h1>
            <p class="hero-subtitle">
                在这里记录生活、分享知识、表达想法<br>
                用文字构建属于你的数字空间
            </p>
            <div class="cta-buttons">
                <a href="blog_list.html" class="cta-btn cta-btn-primary">📚 浏览博客</a>
                <a href="blog_edit.html" class="cta-btn cta-btn-secondary">✍️ 开始写作</a>
            </div>
        </section>

        <!-- 功能特性 -->
        <section class="features-section">
            <h2 style="text-align: center; margin-bottom: 40px; color: #2c3e50; font-size: 2rem;">✨ 功能特性</h2>
            <div class="features-grid">
                <div class="feature-card fade-in-up">
                    <span class="feature-icon">📝</span>
                    <h3 class="feature-title">Markdown 编辑</h3>
                    <p class="feature-desc">
                        支持 Markdown 语法，让写作更专业。包含代码高亮、数学公式、流程图等高级功能。
                    </p>
                </div>
                <div class="feature-card fade-in-up">
                    <span class="feature-icon">🎨</span>
                    <h3 class="feature-title">精美界面</h3>
                    <p class="feature-desc">
                        现代化设计风格，支持暗黑模式切换，响应式布局适配所有设备。
                    </p>
                </div>
                <div class="feature-card fade-in-up">
                    <span class="feature-icon">⚡</span>
                    <h3 class="feature-title">极速体验</h3>
                    <p class="feature-desc">
                        快速加载，流畅交互，自动保存草稿，让创作过程更加顺畅。
                    </p>
                </div>
                <div class="feature-card fade-in-up">
                    <span class="feature-icon">🔒</span>
                    <h3 class="feature-title">安全可靠</h3>
                    <p class="feature-desc">
                        用户认证机制，数据安全保障，让你的创作内容得到完善保护。
                    </p>
                </div>
            </div>
        </section>

        <!-- 快速统计 -->
        <section class="stats-section">
            <h2 style="text-align: center; margin-bottom: 40px; color: #2c3e50; font-size: 2rem;">📊 平台统计</h2>
            <div class="quick-stats fade-in-up">
                <div class="stat-card">
                    <div class="stat-number" id="totalArticles">0</div>
                    <div class="stat-label">总文章数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="totalUsers">1</div>
                    <div class="stat-label">注册用户</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="todayViews">--</div>
                    <div class="stat-label">今日访问</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="systemUptime">99.9%</div>
                    <div class="stat-label">系统稳定性</div>
                </div>
            </div>
        </section>

        <!-- 最新文章预览 -->
        <section class="recent-posts">
            <h2 style="text-align: center; margin-bottom: 40px; color: #2c3e50; font-size: 2rem;">📰 最新文章</h2>
            <div id="recentPosts" class="fade-in-up">
                <div class="loading-placeholder">
                    <div class="loading-spinner"></div>
                    <span>加载最新文章中...</span>
                </div>
            </div>
        </section>

        <!-- 底部信息 -->
        <footer style="text-align: center; padding: 40px 0; color: #666; border-top: 1px solid #e9ecef; margin-top: 60px;">
            <p>© 2024 我的博客系统. 用心创作，用文字记录美好时光.</p>
            <p style="margin-top: 10px; font-size: 0.9rem;">
                <a href="#" style="color: #007bff; text-decoration: none;">关于我们</a> | 
                <a href="#" style="color: #007bff; text-decoration: none;">使用帮助</a> | 
                <a href="#" style="color: #007bff; text-decoration: none;">联系我们</a>
            </p>
        </footer>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // jQuery 加载失败的备用方案
    if (typeof jQuery === 'undefined') {
        document.write('<script src="blog-editormd/lib/jquery.min.js"><\/script>');
    }
</script>
<script src="js/common.js"></script>
<script>
    $(document).ready(function() {
        // 检查登录状态并更新导航
        checkLoginStatus();
        
        // 加载统计数据
        loadStatistics();
        
        // 加载最新文章
        loadRecentPosts();
    });
    
    function checkLoginStatus() {
        const token = localStorage.getItem('userToken');
        const username = localStorage.getItem('username');
        
        if (token) {
            $('#authLink').text('注销').attr('href', '#').click(function(e) {
                e.preventDefault();
                logout();
            });
        } else {
            $('#authLink').text('登录').attr('href', 'blog_login.html');
        }
    }
    
    function loadStatistics() {
        // 加载文章统计
        $.ajax({
            type: "get",
            url: "/blog/getList",
            success: function(result) {
                if (result.code == "SUCCESS" && result.data) {
                    $('#totalArticles').text(result.data.length);
                }
            },
            error: function() {
                $('#totalArticles').text('--');
            }
        });
        
        // 模拟今日访问量
        const views = Math.floor(Math.random() * 100) + 50;
        $('#todayViews').text(views);
    }
    
    function loadRecentPosts() {
        $.ajax({
            type: "get",
            url: "/blog/getList",
            success: function(result) {
                if (result.code == "SUCCESS" && result.data && result.data.length > 0) {
                    let html = '';
                    const recentPosts = result.data.slice(0, 3); // 只显示最新3篇
                    
                    recentPosts.forEach(post => {
                        const formattedDate = formatDate(post.createTime);
                        const truncatedContent = truncateText(post.content, 100);
                        
                        html += `
                            <div class="blog" style="margin-bottom: 20px;">
                                <div class="title">${post.title || '无标题'}</div>
                                <div class="date">${formattedDate}</div>
                                <div class="desc">${truncatedContent}</div>
                                <a class="detail" href="blog_detail.html?blogId=${post.id}">阅读全文 »</a>
                            </div>
                        `;
                    });
                    
                    $('#recentPosts').html(html);
                } else {
                    $('#recentPosts').html(`
                        <div style="text-align: center; padding: 40px; color: #666;">
                            <p>暂无文章</p>
                            <a href="blog_edit.html" style="color: #007bff; text-decoration: none;">创作第一篇文章 →</a>
                        </div>
                    `);
                }
            },
            error: function() {
                $('#recentPosts').html(`
                    <div style="text-align: center; padding: 40px; color: #666;">
                        <p>加载失败，请稍后重试</p>
                    </div>
                `);
            }
        });
    }
</script>
</body>
</html>